<template>
  <div class="sync_rule">
    <h1 class="title1">开启同步</h1>
    <div class="content">
      <span>书签同步</span
      ><el-switch
        v-model="sync_rule.sync_rule_enable"
        @change="setSyncRule"
        style="margin-left: 50px"
      ></el-switch>
      <div style="margin-top: 15px">
        开启同步后，并且配置了以下三种规则之一(同步URL规则,同步菜单目录,同步标签)，收藏书签的时候就会触发同步逻辑，同时会触发你已经授权绑定的平台同步逻辑
      </div>
    </div>
    <h1 class="title1">同步URL规则</h1>
    <div class="content">
      <div class="flex jce">
        <el-button type="primary" @click="visible = true">添加站点</el-button>
      </div>
      <div class="table" style="margin-top: 10px">
        <el-table :data="sync_rule.sync_rule_url">
          <el-table-column label="URL路径" prop="url"></el-table-column>
          <el-table-column label="名单类型" prop="type"></el-table-column>
          <el-table-column label="" prop="">
            <template #default="scope">
              <el-button
                icon="Delete"
                type="danger"
                plain
                circle
                @click="delUrlRule(scope.$index)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <h1 class="title1">同步菜单目录</h1>
    <div class="content flex">
      <el-select
        v-model="sync_rule.sync_rule_menu"
        multiple
        filterable
      >
        <el-option
          v-for="(item, index) in menus"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button @click="saveSyncMenu" style="margin-left: 20px"
        >保存</el-button
      >
    </div>
    <h1 class="title1">同步标签</h1>
    <div class="content flex">
      <el-select
        v-model="sync_rule.sync_rule_tags"
        multiple
        filterable
      >
        <el-option
          v-for="(item, index) in tagsList"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button @click="saveSyncTags" style="margin-left: 20px"
        >保存</el-button
      >
    </div>
    <el-dialog
      v-model="visible"
      title="添加规则"
      width="438px"
      @close="resetForm"
    >
      <cloud-form
        ref="formRef"
        v-model="formData"
        :formConfig="formConfig"
      ></cloud-form>
      <template #footer>
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="saveSyncUrl">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, computed, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { mAxios, encodeURL } from "~/utils/axios/axios.js";
const userId = Number(sessionStorage.getItem("user_id"));
const visible = ref(false);
const sync_rule = ref({
  sync_rule_enable: false,
  sync_rule_url: [],
  sync_rule_menu: [],
  sync_rule_tags: [],
});

const formRef = ref();
const formData = ref({
  type: "白名单",
});
const formConfig = [
  {
    label: "名单类型",
    prop: "type",
    type: "radio-group",
    options: [
      { label: "白名单", value: "白名单" },
      { label: "黑名单", value: "黑名单" },
    ],
  },
  {
    label: "URL路径",
    prop: "url",
    type: "input",
    required: true,
  },
];
const resetForm = () => {
  formData.value = { type: "白名单" };
};
const menus = ref([]);
const getmenu = () => {
  mAxios.get(`group/list/${userId}`).then((res) => {
    let s = res.data.data?.map((item) => {
      return {
        label: item.groupName,
        value: item.id,
      };
    });
    menus.value = [{ label: "我的目录", value: 0 }].concat(s);
  });
};
const tagsList = ref([]);
const gettags = () => {
  mAxios.get(`tags`, { params: { userId } }).then((res) => {
    tagsList.value = res.data.data?.map((item) => {
      return {
        label: item.tagName,
        value: item.id,
      };
    });
  });
};
const setSyncRule = () => {
  localStorage.setItem(`sync_rule_${userId}`, JSON.stringify(sync_rule.value));
};
const saveSyncUrl = () => {
  sync_rule.value.sync_rule_url.push(formData.value);
  localStorage.setItem(`sync_rule_${userId}`, JSON.stringify(sync_rule.value));
  ElMessage.success("保存成功");
  visible.value = false;
};
const delUrlRule = (index) => {
  sync_rule.value.sync_rule_url.splice(index, 1);
  localStorage.setItem(`sync_rule_${userId}`, JSON.stringify(sync_rule.value));
  ElMessage.success("删除成功");
};
const saveSyncMenu = () => {
  localStorage.setItem(`sync_rule_${userId}`, JSON.stringify(sync_rule.value));
  ElMessage.success("保存成功");
};
const saveSyncTags = () => {
  localStorage.setItem(`sync_rule_${userId}`, JSON.stringify(sync_rule.value));
  ElMessage.success("保存成功");
};
onMounted(() => {
  const defaultdata = {
    sync_rule_enable: false,
    sync_rule_url: [],
    sync_rule_menu: [],
    sync_rule_tags: [],
  };
  getmenu();
  gettags();
  sync_rule.value =
    JSON.parse(localStorage.getItem(`sync_rule_${userId}`)) || defaultdata;
});
</script>

<style lang="scss" scoped>
.sync_rule {
  width: 60%;
}
.title1 {
  margin-bottom: 25px;
  font-size: 17px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.content {
  box-sizing: border-box;
  margin: 0;
  padding: 20px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 25px;
}
</style>